import React, { useState } from 'react';
import { Form, Row, Col, Input, Button, Select } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

const { Option } = Select;

export default function Search(props) {
  const [expand, setExpand] = useState(false);
  const [form] = Form.useForm();

  const getFields = () => {
    const count = expand ? 4 : 3;
    const children = [
      <Col span={8}>
        <Form.Item name="shopName" label="电站名称">
          <Input />
        </Form.Item>
      </Col>,
      <Col span={8}>
        <Form.Item name="tel" label="手机号">
          <Input />
        </Form.Item>
      </Col>,
      <Col span={8}>
        <Form.Item name="managerName" label="负责人">
          <Input />
        </Form.Item>
      </Col>,
      <Col span={8}>
        <Form.Item name="idCard" label="身份证号">
          <Input />
        </Form.Item>
      </Col>,
    ];
    const children1 = [];
    for (let i = 0; i < count; i++) {
      children1.push(children[i]);
    }
    return children1;
  };
  const onFinish = (values) => {
    // props.getApply(values)
    console.log(props);
    console.log('Received values of form: ', values);
  };
  return (
    <Form
      form={form}
      name="advanced_search"
      className="ant-advanced-search-form"
      onFinish={onFinish}
      style={{ marginBottom: '10px', width: '1200px' }}
    >
      <Row gutter={24}>{getFields()}</Row>
      <Row style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Col>
          <Button type="primary">新增</Button>
          <Button type="dashed" style={{ margin: '0 10px' }}>
            删除
          </Button>
          <Select placeholder="更多操作" style={{ color: '#1890ff' }}>
            <Option>导出Excel</Option>
          </Select>
        </Col>
        <Col
          style={{
            textAlign: 'right',
          }}
        >
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button
            style={{
              margin: '0 8px',
            }}
            onClick={() => {
              form.resetFields();
            }}
          >
            重置
          </Button>
          <a
            style={{
              fontSize: 12,
            }}
            onClick={() => {
              setExpand(!expand);
            }}
          >
            {expand ? <UpOutlined /> : <DownOutlined />}
            {expand ? '收起' : '展开'}
          </a>
        </Col>
      </Row>
    </Form>
  );
}
